<template>
   <div class="login-container" :style="{backgroundImage:`url(${indexPc.backgroundImage})`}">
      <div class="login-box">
        <div class="login-box-left">
          <img :src="indexPc.banner[0].pic" alt="" v-if="indexPc.banner[0]">
        </div>
        <div class="login-box-right">
          <div style="display: flex;justify-content: center;margin-bottom: 10px;">
             <img :src="indexPc.loginLogo" class="logoimg">
          </div>
          <el-form :rules="rules" :model="loginForm" ref="loginFormRef">
             <el-form-item prop="account">
               <el-input prefix-icon="User" v-model="loginForm.account"></el-input>
             </el-form-item>
             <el-form-item prop="pwd">
               <el-input type="password" prefix-icon="Handbag"  v-model="loginForm.pwd"></el-input>
             </el-form-item>
             <el-form-item prop="code">
                <el-input style="width: 250px;margin-right: 10px;" prefix-icon="Message" v-model="loginForm.code"></el-input>
                <img :src="validateCode.code" @click="getValidateCode">
             </el-form-item>
             <el-form-item>
                <el-button type="primary" class="loginbtn" @click="submitLoginForm(loginFormRef)">登录</el-button>
             </el-form-item>
          </el-form>
        </div>
      </div>
   </div>
</template>

<script lang='ts' setup>
import api from '@/api'
import {onMounted,ref,reactive} from 'vue'
import {ValidateCodeType,IndePcType,LoginFormType} from '@/types/login'
import { FormInstance,ElMessage} from 'element-plus'
import useLoginStore from '@/store/modules/useLoginStore'
import {useRouter} from 'vue-router'
const router=useRouter()
const {loginAsync}=useLoginStore()
const loginFormRef=ref<FormInstance>()
const loginForm=reactive<LoginFormType>({
  account:'',
  pwd:'',
  key:'',
  code:''
})

const validateCode=ref<ValidateCodeType>({
  key:'',
  code:''
})
const submitLoginForm=(formEl: FormInstance | undefined)=>{
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      loginForm.key=validateCode.value.key
      const result=await loginAsync(loginForm)
      if(result===200){
        ElMessage.success('登录成功')
        router.replace('/')
      }
      
    } else {
      ElMessage({
        showClose: true,
        message: '用户名密码或者验证码有误',
        type: 'warning',
  })
      return false
    }
  })
}
/**
 * 用来验证账户的自定义验证器
 */
const validatorAccount=(rule:any,value:any,callback:any)=>{
  let reg=/^[a-zA-Z]{4,12}$/
  if(!reg.test(value)){
    return callback(new Error('用户名格式有误'))
  }else{
    return callback()
  }
}

const validatorCode=(rule:any,value:any,callback:any)=>{
  let reg=/^[a-zA-Z0-9]{4}$/
  if(!reg.test(value)){
    return callback(new Error('验证码格式有误'))
  }else{
    return callback()
  }
}

const rules=reactive({
  account:[
    {
      required:true,
      message:'用户名不能为空',
      trigger:'blur'
    },
    {
      validator:validatorAccount,
      trigger:'blur'
    }
  ],
  pwd:[
    {
      required:true,
      message:'密码不能为空',
      trigger:'blur'
    }
  ],
  code:[
    {
      required:true,
      message:'验证码不能为空',
      trigger:'blur'
    },
    {
      validator:validatorCode,
      trigger:'blur'
    }
  ]
})





const indexPc=ref<IndePcType>({
  backgroundImage:'',
  banner:[],
  loginLogo:'',
  logo:''
})
const getValidateCode=async()=>{
  const result=await api.loginModule.getValidateApi()
  validateCode.value=result.data.data
}
const getIndexPc=async()=>{
  const result=await api.loginModule.getIndexPcApi()
  console.log('result',result);
  indexPc.value=result.data.data
  
}
onMounted(()=>{
  getValidateCode()
  getIndexPc()
})
</script>

<style lang='scss' scoped>
.login-container{
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  background-color: #ccc;
  .login-box{
    display: flex;
    box-sizing: border-box;
    width: 670px;
    height: 420px;
    .login-box-left{
      width: 286px;
      height: 100%;
    }
    .login-box-right{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding:20px 30px ;
      background-color: #fff;
      flex-grow: 1;
      height: 100%;
      .logoimg{
        width: 80px;
        height: 80px;
      }
      .loginbtn{
        width: 350px;
      }
    }
  }
  
}
</style>